<template>
    <div
        class="statusbar"
        :style="{ ...style() }">
        <div class="statusbarleft">
            <van-circle
                class="progress-space"
                :current-rate="procRate || 0"
                layer-color="lightgrey"
                :stroke-width="50"
                :size="procBarSize"
                :text="procRateTxt"
                color="#61CFBE"
            >
            </van-circle>
            <div class="number-space">
                <span class="repairidtitle">{{$st('Order_No')}}:{{ orderDetial.repairid || '--' }}</span>
                <span
                    class="repairtime"
                    :style="{color:handlecont.fontcolor}">{{handlecont.text || '处理耗时'}}{{ handletime }}</span>

            </div>
        </div>
        <div class="status-space">
            {{ repairstatusformat(orderDetial.status) }}
        </div>
    </div>
</template>

<script lang="js">
import { reactive, toRefs, computed } from 'vue';
import { getRepairStatusData } from '@/setup/repair/RepairStautsFormat';
export default {
    name: '',
    components: {},
    props: {
        orderDetial: Object,
        height: {
            type: Number,
            default: 50
        }
    },
    setup (props, context) {
        const { repairstatusformat, getstatustimecont, gethandletime, formathandletime } = getRepairStatusData();
        const state = reactive({
            // handlecont: {},
            // // responsetime:0,
            newhandletime: 0

        });
        const handlecont = computed(() => {
            return getstatustimecont(props.orderDetial.status);
        });
        const handletime = computed(() => {
            const param = {
                repairid: props.orderDetial.repairid
            };
            // const val = 0;
            gethandletime(param, (data) => {
                if (props.orderDetial.status === '1') {
                    state.newhandletime = data.value.responsetime;
                } else if (props.orderDetial.status === '2') {
                    state.newhandletime = data.value.handletime;
                } else { state.newhandletime = data.value.evaluatetime; }
            });
            return formathandletime(state.newhandletime) || '';
        });
        const procBarSize = computed(() => {
            return props.height <= 32 ? props.height : 32;
        });
        const procRate = computed(() => {
            return (props.orderDetial.status / 4) * 100;
        });
        const procRateTxt = computed(() => {
            if (props.orderDetial.status === undefined) {
                return '0/4';
            } else {
                return props.orderDetial.status + '/4';
            }
        });
        const style = () => {
            const customStyle = {
                height: `${props.height}px`
                // width: '100%'
                // marginRight: '5px',
                // marginLeft: '5px'
            };
            return customStyle;
        };
        return {
            style,
            procBarSize,
            procRate,
            procRateTxt,
            repairstatusformat,
            ...toRefs(state),
            getstatustimecont,
            gethandletime,
            handlecont,
            // // responsetime:0,
            handletime,
            formathandletime
        };
    }
    // data () {
    //     return {
    //         handlecont: {},
    //         // responsetime:0,
    //         handletime: 0
    //     };
    // },
    // mounted () {
    //     this.gethandlecont();
    // },
    // methods: {
    //     gethandlecont () {
    //         this.handlecont = this.getstatustimecont(this.orderDetial.status);
    //         const param = {
    //             repairid: this.orderDetial.repairid
    //         };
    //         this.gethandletime(param, (data) => {
    //             if (this.orderDetial.status === '1') {
    //                 this.handletime = data.value.responsetime;
    //             } else {
    //                 this.handletime = data.value.handletime;
    //             }
    //         });
    //     }
    // }
};
</script>

<style lang="scss" scoped>
.statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
.statusbarleft{
   display: flex;
   justify-content: flex-start;
   align-items: center;
}
}
// .statusbarcenter{
//     margin-left:10px;
//     display: flex;
//     flex-wrap: wrap;

.number-space{
    // height: 20px;
    margin-left:10px;
    /* margin-right: 8px; */
    /* margin-left:8px;
    margin-right: 8px; */
    /* overflow: hidden;
    white-space: nowrap; */
    word-break: break-all;
    display: flex;
    flex-wrap: wrap;
    min-width: 223px;
    // line-height: 20px;
    .repairidtitle{
        min-width: 223px;
    }
    .repairtime{
        min-width: 223px;
        //  width: 100%;
        height: 20px;
        line-height: 20px;
    }
}
// }
.status-space{
    text-align:center;
    height: 20px;
    line-height: 20px;
    min-width: 50px;
    /* width: 50px; */
    overflow: hidden;
}
.status-space:lang(en) {
  text-align: center;
  /* height: 20px;
    line-height: 20px; */
  /* width: 50px; */
  height: auto;
  line-height: auto;
  min-width: 80px;
  word-wrap: break-word;
  /* background-color: yellow; */
}
.progress-space {
  min-width: 36px;
}
</style>
